<!-- <template>
  <el-dialog v-model="dialogVisible" title="个人信息" width="500px" draggable>
    <el-form>
      <el-form-item label="用户头像" prop="avatar">
        <UploadImg width="135px" height="135px" :file-size="3">
          <template #empty>
            <el-icon><Avatar /></el-icon>
            <span>请上传头像</span>
          </template>
          <template #tip> 头像大小不能超过 3M </template>
        </UploadImg>
      </el-form-item>
      <el-form-item label="用户账号" prop="username">{{ infoStore.nickName }}</el-form-item>
      <el-form-item label="性别" prop="gender"></el-form-item>
      <el-form-item label="年龄" prop="age"> </el-form-item>
      <el-form-item label="用户身份" prop="idCard"> </el-form-item>
      <el-form-item label="邮箱" prop="email"> </el-form-item>
      <el-form-item label="居住地址" prop="address"> {{ infoStore.address }}</el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useInfoStore } from "@/stores/modules/info";
const infoStore = useInfoStore();
const dialogVisible = ref(false);
const openDialog = () => {
  dialogVisible.value = true;
};

defineExpose({ openDialog });
</script> -->

<template>
  <el-drawer v-model="dialogVisible" title="个人信息" size="500px" :destroy-on-close="true">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px" label-suffix="：">
      <el-form-item label="头像" prop="avatar">
        <el-upload class="avatar-uploader" action="#" :show-file-list="false" :on-success="handleAvatarSuccess">
          <img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
          <el-icon v-else><Plus /></el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" placeholder="请输入用户名" />
      </el-form-item>

      <el-form-item label="性别" prop="sex">
        <el-select v-model="formData.sex" placeholder="请选择性别">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input v-model="formData.age" type="number" placeholder="请输入年龄" />
      </el-form-item>

      <el-form-item label="身份" prop="nickName">
        <el-input v-model="formData.nickName" disabled />
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email" placeholder="请输入邮箱" />
      </el-form-item>

      <el-form-item label="地址" prop="address">
        <el-input v-model="formData.address" placeholder="请输入地址" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">保存</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, FormInstance } from "element-plus";
// import { useInfoStore } from "@/store/modules/info";
import { useInfoStore } from "@/stores/modules/info";
const infoStore = useInfoStore();
const dialogVisible = ref(false);
const formRef = ref<FormInstance>();

const formData = reactive({ ...infoStore.userInfo });

const rules = {
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  email: [{ required: true, message: "请输入邮箱", trigger: "blur" }]
};

// 打开弹窗时同步数据
const openDialog = () => {
  Object.assign(formData, infoStore.userInfo); // 同步最新用户数据
  dialogVisible.value = true;
};

// 模拟头像上传成功
const handleAvatarSuccess = (_response: any, file: any) => {
  formData.avatar = URL.createObjectURL(file.raw);
};
onMounted(() => {
  console.log("当前 userInfo 数据为：", infoStore.userInfo);
});
// 提交保存
const submitForm = () => {
  formRef.value?.validate(valid => {
    if (!valid) return;

    // 模拟提交保存
    // infoStore.setUserInfo({ ...formData });
    ElMessage.success("信息保存成功！");
    dialogVisible.value = false;
  });
};

defineExpose({
  openDialog
});
</script>

<style scoped>
.avatar-uploader {
  display: inline-block;
  width: 100px;
  height: 100px;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}
.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
